import React, { Component, MouseEvent } from 'react';
import styles from 'src/pages/DataManage/DataArrange/index.module.scss';
import { Drawer, Button } from 'antd';
import {
	// PushpinOutlined,
	DownCircleOutlined,
	// DownloadOutlined,
} from '@ant-design/icons';

import { nodePreview } from 'src/services/DataManage';
import { fieldTypeMap } from 'src/pages/DataManage/typeMap';
import CustomTable from './component/CustomTable';


	 

interface Iprops {
	modalVisibleValue:boolean
	modalVisible:any
	data:any,
	togglePin:any,
	pin:boolean
}

class DataPreview extends Component<Iprops, any> {
	
	state = {
		'dbId': '',
		'page': 1,
		'pageSize': 10,
		'tableName': '',
		'columns': [],
		'dataSource': [],
		'loading': true,
		'height': 260,
		'dragging': false,
		pos: {
			x: 0,
			y: 0,
			h: 0
		},
		isPin: false, //是否固定
	}

	//修改表头为指定样式
	parseColumns = data => {
		return {
			Header: fieldTypeMap[data.type],
			columns: [
				{
					Header: data.desc,
					accessor: data.name,
					width: 50,
				} ]
		};
	}


	
	//获取预览数据
	getTableData = async data => {
		this.setState( { loading: true } );
		const info = await nodePreview( data );
		if ( info.data&&info.data.success ) {
			// let data =  info.data.data.rows.map( item => {} );
			this.setState( { dataSource: info.data.data.rows,
				columns: info.data.data.columns.map( item => this.parseColumns( item ) ) } );
			this.setState( { loading: false } );
		}

	}

	//onMouseDown
	onMouseDown = ( e: MouseEvent<HTMLDivElement> ) => {
		if ( e.button !== 0 ) return; // 鼠标左键
		this.setState( {
			dragging: true,
			pos: {
				x: e.pageX,
				y: e.pageY,
				h: this.state.height
			}
		} );

		document.onmouseup = this.onMouseUp;
		document.onmousemove = this.onMouseMove;

		e.stopPropagation();
		e.preventDefault();
	};

	//onMouseUp
	onMouseUp = ( e: any ) => {
		this.setState( { dragging: false } );
		document.onmouseup = null;
		document.onmousemove = null;
		e.stopPropagation();
		e.preventDefault();
	};

	//onMouseMove
	onMouseMove = ( e: any ) => {
		if ( !this.state.dragging ) return;
		this.setState( {
			height: this.state.pos.h + ( this.state.pos.y - e.pageY )
		} );
		e.stopPropagation();
		e.preventDefault();
	};

	//固定/取消固定
	togglePin = () => {
		this.props.togglePin( !this.props.pin );
	};

	handleResize = index => ( e, { size } ) => {
		this.setState( ( { columns } ) => {
			const nextColumns = [ ...columns ];
			nextColumns[index] = {
				...nextColumns[index],
				width: size.width,
			};
			return { columns: nextColumns };
		} );
	};


	handleColumnWidth = ( text, index ) => {
		let columnWidth = this.state.columns[index].width;
		if( columnWidth < 50 && index !== 0 ) {
			columnWidth = 50;
		}
		return ( <span title={text} className={'ellipsisText'}  style={{ width: columnWidth }}>{text}</span> );
	}

	

	async componentDidUpdate( prevProps: Readonly<Iprops>, prevState: Readonly<any>, snapshot?: any ): Promise<void> {
		const data = this.props.data;
		if( this.props.data.id && prevProps.data.id !== this.props.data.id ) {
			await this.getTableData( { data: { 'componentId': data.id, 'modelId': data.modelId } } );
		}
		if( this.props.modalVisibleValue&&( this.props.modalVisibleValue !== prevProps.modalVisibleValue ) ) {
			await this.getTableData( { data: { 'componentId': data.id, 'modelId': data.modelId } } );
		}
	}

	render() {
		const title = (
			<span>
				<span style={{ fontWeight: 'bolder' }}>预览数据</span>
				<span style={{ fontWeight: 'bolder',color: 'red' }}>   (最多预览10行数据)</span>
				<Button className={`${styles.pushpin} ${this.props.pin?styles.pin:''}`} 
								 type="text" onClick={this.togglePin}
								 icon={this.props.pin
									 ? <span className="iconfont">&#xe738;</span>
									 :<span className="iconfont">&#xe741;</span>}>
				</Button>
				{/*icon={<PushpinOutlined />}></Button>*/}
			</span>
		);
		return (
			<div className={styles.drawerContainer}>
				<Drawer
					title={title}
					closable={true}
					closeIcon={<DownCircleOutlined/>}
					placement="bottom"
					height={this.state.height}
					mask={false}
					getContainer={false}
					onClose={() => this.props.modalVisible( 'dataVisible',false )}
					visible={this.props.modalVisibleValue}
					style={{ position: 'absolute' }}
				>
					<div className={styles.dragLine} onMouseDown={this.onMouseDown}>
					</div>
					
					{/* <Row gutter={13} justify={'space-between'}> */}
					{/* <Col span={3}><span><span style={{ color: 'rgba( 103, 194, 58, 1 )' }}>|</span>预览数据</span></Col> */}
					{/*<Row gutter={13}>*/}
					{/*<Col onClick={() => this.props.modalVisible( 'downloadVisible',true )}><DownloadOutlined/></Col>*/}
					{/* <Col span={1} onClick={() => this.props.modalVisible( 'dataVisible',false )}><DownCircleOutlined/></Col> */}
					{/*	<Col/>*/}
					{/*</Row>*/}
					{/* </Row> */}
					<div className={styles.table}>
						<CustomTable data={this.state.dataSource} columns={this.state.columns}/>
					</div>
					{/*<Table*/}
					{/*	style={{ marginTop: '20px' }}*/}
					{/*	bordered*/}
					{/*	// components={this.components}*/}
					{/*	pagination={false}*/}
					{/*	loading={this.state.loading}*/}
					{/*	columns={this.state.columns}*/}
					{/*	scroll={{ x: true }}*/}
					{/*	dataSource={this.state.dataSource}/>*/}
				</Drawer>
			</div>
		);
	}
};

export default DataPreview ;